<template>
	<view class="auth-container">
		<!-- 返回按钮 -->
		<view class="back-btn" @click="navigateBack">←</view>
		
		<view class="auth-card">
			<!-- Logo图片 -->
			<image class="logo" src="/static/logo.png"></image>
			<text class="auth-title">登录</text>

			<view class="input-group">
				<!-- 固定默认用户名JinXxx -->
				<input 
					type="text" 
					class="input-field" 
					placeholder="请输入用户名" 
					v-model="username"
				/>

				<!-- 固定默认密码123456（密码框） -->
				<input 
					type="password" 
					class="input-field" 
					placeholder="请输入密码" 
					v-model="password"
				/>

				<!-- 记住密码开关 -->
				<view class="remember-box">
					<switch 
						v-model="rememberPwd" 
						color="#ff7e5f"
					/>
					<text class="remember-text">记住密码</text>
				</view>
				
				<!-- 登录错误提示 -->
				<text v-if="loginError" class="error-message">{{ loginError }}</text>
			</view>

			<!-- 橙色登录按钮 -->
			<button class="auth-btn" @click="handleLogin">登录</button>

			<!-- 注册链接 -->
			<view class="switch-tip">
				<text>没有账号？</text>
				<text class="switch-link" @click="goToRegister">去注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 核心修改：默认用户名改为JinXxx
				username: 'JinXxx',
				password: '123456',
				rememberPwd: false, // 记住密码开关状态
				loginError: '' // 登录错误提示
			}
		},
		onLoad() {
			// 页面加载时读取本地保存的账号密码（仅勾选记住密码时生效）
			this.loadSavedAccount()
		},
		methods: {
			// 返回上一页
			navigateBack() {
				uni.navigateBack()
			},
			
			// 加载本地保存的账号密码
			loadSavedAccount() {
				const savedAccount = uni.getStorageSync('savedAccount')
				if (savedAccount) {
					this.username = savedAccount.username
					this.password = savedAccount.password
					this.rememberPwd = true // 同步开关状态
				}
			},
			
			// 登录逻辑（整合验证、存储、跳转）
			handleLogin() {
				this.loginError = '';
				
				// 非空验证
				if (!this.username || !this.password) {
					this.loginError = '请输入用户名和密码';
					return;
				}
				
				// 模拟固定账号密码验证（已匹配JinXxx）
				if (this.username === 'JinXxx' && this.password === '123456') {
					// 保存用户登录状态
					uni.setStorageSync('userInfo', {
						username: this.username,
						avatar: '/static/logo.png'
					})
					
					// 根据记住密码开关决定是否保存账号密码
					if (this.rememberPwd) {
						uni.setStorageSync('savedAccount', {
							username: this.username,
							password: this.password
						})
					} else {
						uni.removeStorageSync('savedAccount') // 未勾选则清除
					}
					
					// 更新tabBar文本（我的页面）
					uni.setTabBarItem({
						index: 3, // 第四个tab（根据实际配置调整）
						text: '我的'
					})
					
					// 登录成功提示并跳转tabBar页面
					uni.showToast({
						title: '登录成功',
						icon: 'success',
						duration: 1500,
						success: () => {
							uni.switchTab({
								url: '/pages/tabBar/interface/interface', // 跳转到“我的”页面
								success: () => {
									console.log('tabBar 页面跳转成功');
								},
								fail: (err) => {
									console.error('tabBar 跳转失败：', err);
									console.error('请检查：1. 路径是否正确 2. 页面是否在 pages.json 的 tabBar.list 中配置');
								}
							});
						}
					})
				} else {
					// 账号密码错误提示
					this.loginError = '用户名或密码错误';
				}
			},
			
			// 跳转到注册页
			goToRegister() {
				uni.navigateTo({
					url: '/pages/component/Register/Register' // 匹配第二个代码的注册页路径
				});
			}
		}
	}
</script>

<style scoped>
	/* 基础容器样式 */
	.auth-container {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f5f5f5;
		padding: 20px;
		position: relative; /* 为返回按钮定位 */
		box-sizing: border-box;
	}

	/* 返回按钮 */
	.back-btn {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		font-size: 40rpx;
		color: #333;
		z-index: 99;
	}

	/* 登录卡片 */
	.auth-card {
		width: 100%;
		max-width: 250px;
		background: white;
		border-radius: 10px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
		padding: 30px;
		transition: all 0.3s ease;
		text-align: center; /* 整体居中 */
	}

	/* Logo样式 */
	.logo {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin: 0 auto 30rpx;
		display: block;
		background-color: #00cc66; /* 图片缺失时的备用绿色背景 */
	}

	/* 登录标题 */
	.auth-title {
		font-size: 28px;
		color: #333;
		text-align: center;
		margin: 0 auto 30px;
		padding: 0;
		font-weight: 600;
		display: block;
		width: fit-content;
	}

	/* 输入框组 */
	.input-group {
		margin-bottom: 30px;
		width: 100%;
		text-align: left; /* 输入框和记住密码左对齐 */
	}

	/* 输入框样式（整合第二个代码的样式） */
	.input-field {
		width: 100%;
		height: 80rpx;
		border: 1px solid #e0e0e0;
		border-radius: 8rpx;
		font-size: 16px;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
		background-color: #f9f9f9;
	}

	.input-field:focus {
		outline: none;
		border-color: #ff7e5f; /* 聚焦色匹配橙色主题 */
	}

	/* 记住密码区域 */
	.remember-box {
		display: flex;
		align-items: center;
		margin: 20rpx 0 10rpx;
		justify-content: flex-start;
		padding-left: 5rpx;
	}

	.remember-text {
		font-size: 26rpx;
		color: #666;
		margin-left: 10rpx;
	}

	/* 登录按钮（改为橙色） */
	.auth-btn {
		width: 100%;
		background-color: #ff7e5f; /* 橙色按钮 */
		color: white;
		border: none;
		border-radius: 8px;
		padding: 15px;
		font-size: 16px;
		font-weight: 600;
		margin-top: 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.auth-btn:hover {
		background-color: #e86a4c; /* hover加深橙色 */
	}

	/* 切换提示 */
	.switch-tip {
		text-align: center;
		margin-top: 20px;
		font-size: 14px;
		color: #666;
	}

	.switch-link {
		color: #ff7e5f; /* 链接色匹配橙色主题 */
		margin-left: 5px;
		text-decoration: none;
	}

	.switch-link:hover {
		text-decoration: underline;
	}

	/* 错误提示 */
	.error-message {
		color: #ff3b30;
		font-size: 14px;
		margin-top: 5px;
		text-align: left;
	}

	/* 适配小屏设备 */
	@media (max-width: 360px) {
		.auth-card {
			max-width: 300px;
			padding: 20px;
		}
		.auth-title {
			font-size: 24px;
		}
	}
</style>